<style lang="scss" scoped>
.addContent>div {
    display: flex;
    margin-bottom: 10px;

    .label {
        width: 200px;
        text-align: right;
        margin-right: 16px;
        display: inline-block;
    }

    .el-input {
        width: 240px;
    }
}
</style>
<template>
    <div>
        添加商品
        <div class="addContent">
            <div>
                <span class="label">
                    条形码</span>
                <div>
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">有条码</el-radio>
                        <el-radio :label="2">无条码</el-radio>
                    </el-radio-group>
                    <p><el-input v-model="produceList.sku" placeholder="" v-if="radio == 1" /></p>
                </div>
            </div>
            <div>
                <span class="label">商品分类</span>
                <div class="block">
                    <el-cascader v-if="catelist.length" :options="catelist" v-model="label" filterable
                        :props="{ expandTrigger: 'hover', label: 'catename', value: 'id' }" @change="handleChange">
                    </el-cascader>
                </div>
            </div>
            <div>
                <span class="label">商品名称</span>
                <el-input placeholder="商品名称" v-model="produceList.produceName"></el-input>
            </div>
            <div :style="{marginTop:'20px'}">
                <span class="label">商品图片</span>
                <el-upload action="#" list-type="picture-card"  :limit="5">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                <i class="el-icon-download"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
            </div>
            <div><el-button type="primary" :style="{ marginTop: '30px',marginLeft:'230px' }">上传图片</el-button></div>
        </div>
    </div>
</template>
<script>
import { AddProduceList, GetCate } from '@/api/produce';
export default {
    data() {
        return {
            radio: 1,
            produceList: {
                sku: '',
                produceName: '',
            },
            // 分类信息
            catelist: [],
            label: []
        }
    },
    created() {
        this.getCate()
    },
    methods: {
        addProduceList() {
            AddProduceList(this.produceList)
                .then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: "添加成功",
                            type: "success"
                        })
                    } else {
                        this.$message({
                            message: "添加失败",
                            type: "warning"
                        })
                    }
                })
        },
        getCate() {
            GetCate()
                .then(res => {
                    this.catelist = res.data.list
                })
        },
        handleChange(value) {
            console.log(value);
        }
    }
}
</script>